feat(UI): Device selector by ActiveChooN · Pull Request #839 · open-edge-platform/geti-instant-learn

ActiveChooN · 2026-03-12T13:48:18Z

Pull Request

Description

Added device selector
Closes #837

Type of Change

Related Issues

Breaking Changes

Examples

Screenshots

github-actions · 2026-03-12T13:51:52Z

📊 Test coverage report

Metric	Coverage
Lines	48.8%
Functions	58.1%
Branches	89.2%
Statements	48.8%

dwesolow · 2026-03-31T08:29:24Z

application/ui/src/features/device-selector/api/use-update-project-device.ts

+            },
+            {
+                onSuccess: async () => {
+                    await queryClient.invalidateQueries({


instead of invalidating queries here in onSuccess we could also do it in mutation's meta property (the only benefit would be that queryClient and getQueryKey would not be necessary).

dwesolow · 2026-03-31T08:30:28Z

application/ui/src/features/device-selector/device-selector.types.ts

+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export interface DeviceOption {


most probably that type will come from @/api once server supprts it.

Copilot

Pull request overview

Adds a new Device selector UI feature to the React frontend and places it in the main toolbar, intended to let users choose an inference accelerator at the project level (Issue #837).

Changes:

Introduces a DeviceSelector component and supporting hook/types under features/device-selector/.
Adds a project update mutation hook intended to persist the selected device via PUT /api/v1/projects/{project_id}.
Renders the selector in the toolbar next to the existing Sources/Sinks controls.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
application/ui/src/features/device-selector/device-selector.types.ts	Adds `DeviceOption` type for picker items.
application/ui/src/features/device-selector/device-selector.component.tsx	Adds the `DeviceSelector` UI (Suspense + Picker).
application/ui/src/features/device-selector/api/use-update-project-device.ts	Adds mutation hook for persisting device selection + invalidation.
application/ui/src/features/device-selector/api/use-get-devices.ts	Adds a devices hook (currently mock data).
application/ui/src/components/toolbar/toolbar.component.tsx	Places the selector into the toolbar layout.

Copilot · 2026-03-31T09:11:41Z

application/ui/src/features/device-selector/device-selector.component.tsx

+    const { data: _project } = useCurrentProject();
+    const updateDevice = useUpdateProjectDevice();
+
+    const items: DeviceOption[] = [AUTO_DEVICE, ...devices];
+
+    // TODO: Replace with actual project device when API is ready
+    const selectedDevice = 'auto';


useCurrentProject() result is currently unused, and selectedDevice is hard-coded to 'auto' while Picker is controlled via selectedKey. As a result, the picker selection will never visually change (it will always show Auto) and it won’t reflect the project’s persisted device value. Derive the selected key from project.device (fallback to auto) and/or keep local state that updates on selection / mutation success, and remove the unused _project alias if not needed.

Suggested change

const { data: _project } = useCurrentProject();

const updateDevice = useUpdateProjectDevice();

const items: DeviceOption[] = [AUTO_DEVICE, ...devices];

// TODO: Replace with actual project device when API is ready

const selectedDevice = 'auto';

const { data: project } = useCurrentProject();

const updateDevice = useUpdateProjectDevice();

const items: DeviceOption[] = [AUTO_DEVICE, ...devices];

const selectedDevice = project?.device ?? 'auto';

Copilot · 2026-03-31T09:11:42Z

application/ui/src/features/device-selector/api/use-get-devices.ts

+// TODO: Replace with $api.useSuspenseQuery('get', '/api/v1/system/devices', ...) once the endpoint is available.
+const MOCK_DEVICES: DeviceOption[] = [
+    { id: 'cpu', name: 'CPU' },
+    { id: 'xpu', name: 'Intel GPU' },
+    { id: 'cuda', name: 'NVIDIA GPU' },
+];
+
+export const useGetDevices = (): DeviceOption[] => {
+    return MOCK_DEVICES;


This hook currently returns a hard-coded MOCK_DEVICES list. The issue/PR acceptance criteria requires fetching available devices from GET /system/devices and always including an Auto option, so this should be implemented against the real endpoint (and the UI should handle loading/error states accordingly) rather than shipping a mock.

Copilot · 2026-03-31T09:11:42Z

application/ui/src/features/device-selector/api/use-update-project-device.ts

+    // TODO: Replace with proper data type once the API is ready.
+    const mutation = $api.useMutation('put', '/api/v1/projects/{project_id}', {
+        meta: {
+            error: { notify: true },
+        },
+    });
+
+    const updateDevice = (device: string): void => {
+        mutation.mutate(
+            {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                body: { device } as any,
+                params: { path: { project_id: projectId } },
+            },


body: { device } as any defeats the OpenAPI typing and can mask mismatches with the backend contract. Since the backend PUT /projects/{project_id} update schema supports device, prefer reusing the existing typed useUpdateProject hook (or use ProjectUpdateType directly) so the payload is type-checked and you don’t need an any cast.

Copilot · 2026-03-31T09:11:42Z

application/ui/src/features/device-selector/device-selector.component.tsx

+export const DeviceSelector = () => {
+    return (
+        <Suspense fallback={<Loading size={'S'} />}>
+            <DeviceSelectorContent />
+        </Suspense>
+    );
+};
+
+const DeviceSelectorContent = () => {
+    const devices = useGetDevices();
+    const { data: _project } = useCurrentProject();
+    const updateDevice = useUpdateProjectDevice();
+
+    const items: DeviceOption[] = [AUTO_DEVICE, ...devices];
+
+    // TODO: Replace with actual project device when API is ready
+    const selectedDevice = 'auto';
+
+    const handleSelectionChange = (key: Key | null): void => {
+        const next = String(key);
+
+        if (key !== null && next !== selectedDevice) {
+            updateDevice.mutate(next);
+        }
+    };


There are existing UI tests for similar toolbar pickers, but this new selector has no tests covering its core behavior (rendering Auto + device options, reflecting project.device, and issuing the PUT update + invalidating the project query on change). Adding a device-selector.component.test.tsx (MSW-mocked) would prevent regressions.

Copilot · 2026-03-31T09:11:43Z

application/ui/src/features/device-selector/device-selector.component.tsx

+        <Picker
+            label={'Device'}
+            aria-label={'device'}
+            labelPosition={'side'}
+            labelAlign={'end'}
+            selectedKey={selectedDevice}
+            onSelectionChange={handleSelectionChange}


aria-label is currently set to a generic lowercase 'device'. For better screen reader output and consistency with other labels in this codebase, use a more descriptive label (e.g., "Device" or "Device selector"), or rely on the visible label prop if Picker already wires it up correctly.

Added device selector with mocked data

f2692d6

ActiveChooN added 2 commits March 30, 2026 08:57

Merge branch 'main' into dkalinin/device-selector

c515f1c

Fixed header

763d35e

ActiveChooN marked this pull request as ready for review March 31, 2026 08:20

ActiveChooN requested review from MarkRedeman, camiloHimura, dwesolow, jpggvilaca and pplaskie as code owners March 31, 2026 08:20

Copilot AI review requested due to automatic review settings March 31, 2026 08:20

dwesolow reviewed Mar 31, 2026

View reviewed changes

dwesolow approved these changes Mar 31, 2026

View reviewed changes

Copilot started reviewing on behalf of ActiveChooN March 31, 2026 08:56 View session

Copilot AI reviewed Mar 31, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(UI): Device selector#839

feat(UI): Device selector#839
ActiveChooN wants to merge 3 commits intomainfrom
dkalinin/device-selector

ActiveChooN commented Mar 12, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 12, 2026 •

edited

Loading

Uh oh!

dwesolow Mar 31, 2026

Uh oh!

dwesolow Mar 31, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

ActiveChooN commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request

Description

Type of Change

Related Issues

Breaking Changes

Examples

Screenshots

Uh oh!

github-actions bot commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Test coverage report

Uh oh!

dwesolow Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

dwesolow Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ActiveChooN commented Mar 12, 2026 •

edited

Loading

github-actions bot commented Mar 12, 2026 •

edited

Loading